<template>
  <div class="bill-page">
    <div class="filter-box">
      <div class="form-item">
        <div class="form-item-label">用户名：</div>
        <el-input v-model="search" placeholder="请输入姓名" :suffix-icon="Search" clearable />
      </div>
      <div class="btn-box">
        <!-- <el-button type="primary" @click="getBillList">刷新</el-button> -->
        <!-- <el-button type="primary" @click="filterBillList">确定</el-button> -->
      </div>
    </div>
    <div class="table-container">
      <el-table :data="tableData">
        <template v-for="item in columns" :key="item.prop">
          <el-table-column v-if="item.prop === 'operation'" :prop="item.prop" :label="item.label">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="
                  () => {
                    showDetailHandle(scope.row)
                  }
                "
              >
                详细信息
              </el-button>
            </template>
          </el-table-column>
          <el-table-column v-else-if="item.prop === 'type'" :prop="item.prop" :label="item.label">
            <template #default="scope">
              <span
                :style="{
                  fontWeight: 600,
                  color:
                    scope.row.type === '充值'
                      ? '#67C23A'
                      : scope.row.type === '消费'
                      ? '#F56C6C'
                      : '#E6A23C'
                }"
                >{{ scope.row.type }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="item.prop === 'rechargeAmount'"
            :prop="item.prop"
            :label="item.label"
          >
            <template #default="scope">
              <span :style="{ color: '#67C23A', fontWeight: 600 }">{{
                scope.row.rechargeAmount
              }}</span>
            </template>
          </el-table-column>
          <el-table-column v-else-if="item.prop === 'spend'" :prop="item.prop" :label="item.label">
            <template #default="scope">
              <span :style="{ color: '#F56C6C', fontWeight: 600 }">{{ scope.row.spend }}</span>
            </template>
          </el-table-column>
          <el-table-column v-else-if="item.prop === 'edit'" :prop="item.prop" :label="item.label">
            <template #default="scope">
              <span :style="{ color: '#409EFF', fontWeight: 600 }">{{ scope.row.balance }}</span>
            </template>
          </el-table-column>
          <el-table-column v-else :prop="item.prop" :label="item.label" :width="item.width" />
        </template>
      </el-table>
    </div>
  </div>
  <BillDetailModal v-model="showDetail" :operation-row="operationRow" />
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useUsersStore, useBillStore } from '@/stores/index'
import BillDetailModal from '@/components/BillDetailModal.vue'
import { Search } from '@element-plus/icons-vue'
import { getFileData } from '@/utils'
import { useRoute } from 'vue-router'
const billStore = useBillStore()
const route = useRoute()

const columns = ref([
  {
    prop: 'consumer',
    label: '姓名',
    width: '150'
  },
  {
    prop: 'type',
    label: '类型',
    width: '150'
  },
  {
    prop: 'rechargeAmount',
    label: '充值金额',
    width: '150'
  },
  {
    prop: 'spend',
    label: '消费金额',
    width: '150'
  },
  {
    prop: 'edit',
    label: '操作后余额',
    width: '150'
  },
  // {
  //   prop: 'target',
  //   label: '消费对象'
  // },
  // {
  //   prop: 'balance',
  //   label: '本次操作后余额'
  // },
  {
    prop: 'date',
    label: '操作时间',
    width: '300'
  },
  // {
  //   prop: 'remark',
  //   label: '备注'
  // }
  {
    prop: 'operation',
    label: '操作'
  }
])

const getBillList = () => {
  getFileData('/bill.json').then(({ type, res }) => {
    if (type === 'success') {
      const billList = JSON.parse(`[${res.slice(0, -1)}]`)
      // 倒序排列
      billList.reverse()
      billStore.setBillList(billList)
    }
    if (type === 'create') {
      ElMessage({
        message: '文件创建成功',
        type: 'success'
      })
    }
  })
}

const refreshData = () => {
  getBillList()
}

const search = ref('')
const tableData = computed(() => {
  return billStore.billList.filter((item) => {
    if (search.value === '') return true
    else return item.consumer.includes(search.value)
  })
})

const showDetail = ref(false)
// 当前操作行数据
const operationRow = ref({})
const showDetailHandle = (row) => {
  operationRow.value = row
  showDetail.value = true
}
// 获取文件数据并保存在pinia中
onMounted(() => {
  refreshData()
  search.value = route.query.name || ''
})
</script>

<style lang="scss" scoped>
.bill-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .filter-box {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .form-item {
      display: flex;
      align-items: center;
      &-label {
        margin-right: 10px;
        width: 100px;
      }
    }
  }
  .table-container {
    flex: 1;
    overflow: auto;
  }
}
</style>